<template>
  <v-row>
    <v-col cols="10">
      <v-card flat>
        <v-card-text>
          <v-expansion-panels
            v-model="panel"
            multiple
            tile
          >
            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>
                <div class="d-flex align-center justify-space-between">
                  <div class="d-flex align-center">
                    <span class="mr-8">团费收入</span>
                    <v-select
                      v-model="cost"
                      :items="childs"
                      item-text="tripname"
                      item-value="id"
                      return-object
                      hide-details
                      dense
                      style="width: 360px">
                    </v-select>
                  </div>
                  <SelectTourfee :selected="selecteTourfee" @change="handleChangeTourfee"/>
                </div>
              </v-expansion-panel-header>
              <v-divider />
              <v-form
                ref="tourFeeform"
                :lazy-validation="false"
              >
                <v-container class="py-0">
                  <v-row>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">币种：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-select :items="['人民币·CNY', '泰铢·THB']"></v-select>
                        </div>
                      </v-row>
                    </v-col>
                    <v-col cols="6" class="py-0 form-item-border">
                      <v-row align="center" style="height: 100%;">
                        <label class="text-right flex-shrink-0" style="width: 140px;">汇率：</label>
                        <div class="pr-4 flex-grow-1">
                          <v-text-field></v-text-field>
                        </div>
                      </v-row>
                    </v-col>
                  </v-row>
                </v-container>
                <v-divider />
                <v-card flat>
                  <el-table
                    :data="tourfeeData"
                    :summary-method="getSummaries"
                    border
                    show-summary>
                    <el-table-column
                      label="费用项目"
                      prop="name"
                      width="240">
                      <template slot="header">
                        <span class="mr-1">费用项目</span>
                        <small class="red--text">({{$t('other.required')}})</small>
                      </template>
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.project_name"
                          outlined
                          single-line
                          hide-details
                          dense
                          :rules="[rules.required]"
                          required
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="180"
                      prop="price"
                      label="单价">
                      <template slot="header">
                        <span class="mr-1">单价</span>
                        <small class="red--text">({{$t('other.required')}})</small>
                      </template>
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model.number="row.price"
                          type="number"
                          outlined
                          single-line
                          hide-details
                          dense
                          :rules="[rules.required]"
                          required
                          @input="inputTourfeeItem(row)"
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="180"
                      prop="num"
                      label="数量">
                      <template slot="header">
                        <span class="mr-1">数量</span>
                        <small class="red--text">({{$t('other.required')}})</small>
                      </template>
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model.number="row.count"
                          type="number"
                          outlined
                          single-line
                          hide-details
                          dense
                          :rules="[rules.required]"
                          required
                          @input="inputTourfeeItem(row)"
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="180"
                      prop="price_total"
                      label="合计金额">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.price_total"
                          outlined
                          single-line
                          hide-details
                          dense
                          readonly
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="remark"
                      label="备注">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.remark"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      :label="$t('other.action')"
                      width="80">
                      <template slot-scope="{ $index }">
                        <v-btn small color="warning" outlined @click="handleRmoveTourfee($index)">{{ $t('actions.delete') }}</v-btn>
                      </template>
                    </el-table-column>
                  </el-table>
                  <v-container class="py-0">
                    <v-row>
                      <v-col cols="12" class="py-0 form-item-border">
                        <v-row align="center" style="height: 100%;">
                          <label class="text-right flex-shrink-0" style="width: 140px;">团费说明：</label>
                          <div class="pr-4 flex-grow-1">
                            <v-textarea
                              v-model="formData.detail.outlay"
                              counter
                              rows="2"
                              no-resize
                              clearable
                              >
                            </v-textarea>
                          </div>
                        </v-row>
                      </v-col>
                    </v-row>
                  </v-container>
                  <v-card-actions>
                    <div class="d-flex justify-space-between flex-grow-1 align-center">
                      <div class="font-weight-bold"></div>
                      <div>
                        <v-btn color="primary" class="mx-2" :disabled="!tourfeeData.length" @click="save('hotel')">保存</v-btn>
                      </div>
                    </div>
                  </v-card-actions>
                </v-card>
              </v-form>
            </v-expansion-panel>

            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>
                <div class="d-flex align-center justify-space-between">
                  <span>购物佣金收入</span>
                  <SelectShopping :selected="selectionShopping" @selection="handleChangeShopping"/>
                </div>
              </v-expansion-panel-header>
              <v-divider />
              <v-container class="pa-0">
                <template v-for="(shopping, index) in selecteShopping">
                  <v-container :key="shopping.id + 'b'" class="py-0">
                    <v-row style="background: #fafafa;" align="center">
                      <v-col cols="5" class="pl-6">{{shopping.name}}</v-col>
                      <v-col cols="7" class="d-flex align-center justify-end">
                        <span>进店人数：</span>
                        <div style="width: 80px;">
                          <v-text-field
                          outlined
                          dense
                          single-line
                          hide-details
                          ></v-text-field>
                        </div>
                        <span class="ml-6">币种：</span>
                        <div style="width: 150px;">
                          <v-select outlined hide-details dense :items="['人民币·CNY', '泰铢·THB']"></v-select>
                        </div>
                        <span class="ml-6">汇率：</span>
                        <div style="width: 80px;">
                          <v-text-field
                            hide-details
                            dense
                            outlined
                            single-line
                            >
                          </v-text-field>
                        </div>
                        <v-btn class="mx-6" small outlined @click="removeShopping(index)">删除</v-btn>
                        <v-btn small outlined>添加</v-btn>
                      </v-col>
                    </v-row>
                  </v-container>
                  <el-table
                    :key="shopping.id + 'a'"
                    :data="shopping.selection"
                    border>
                    <el-table-column
                      label="进店日期"
                      width="180">
                      <template slot-scope="{ row }">
                        <el-date-picker style="width: 158px" :clearable="false" v-model="row.date" value-format="yyyy-MM-dd"></el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="项目"
                      width="180">
                      <template slot="header">
                        <span class="mr-1">项目</span>
                        <small style="color: red">({{$t('other.required')}})</small>
                      </template>
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                          :rules="[rules.required]"
                          required
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="总购物"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="数量"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="公司提成方式"
                      width="160">
                      <template slot-scope="{ row }">
                        <v-select
                          v-model="row.name"
                          :items="['按比例', '按数量', '固定金额']"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="公司提成"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        >
                          <div style="line-height: 24px;" slot="append">%</div>
                        </v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="公司收入"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="导游提成方式"
                      width="160">
                      <template slot-scope="{ row }">
                        <v-select
                          v-model="row.name"
                          :items="['按比例', '按数量', '固定金额']"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="导游提成"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        >
                          <div style="line-height: 24px;" slot="append">%</div>
                        </v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="导游预计佣金"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="领队提成方式"
                      width="160">
                      <template slot-scope="{ row }">
                        <v-select
                          v-model="row.name"
                          :items="['按比例', '按数量', '固定金额']"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="领队提成"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        >
                          <div style="line-height: 24px;" slot="append">%</div>
                        </v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="领队预计佣金"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="司机提成方式"
                      width="160">
                      <template slot-scope="{ row }">
                        <v-select
                          v-model="row.name"
                          :items="['按比例', '按数量', '固定金额']"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="司机提成"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        >
                          <div style="line-height: 24px;" slot="append">%</div>
                        </v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="司机预计返佣"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="二次返佣提成方式"
                      width="180">
                      <template slot-scope="{ row }">
                        <v-select
                          v-model="row.name"
                          :items="['按比例', '按数量', '固定金额']"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="二次提成"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        >
                          <div style="line-height: 24px;" slot="append">%</div>
                        </v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="二次提成小计"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="备注"
                      width="180">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      align="center"
                      width="140">
                      <template slot-scope="{ row, $index }">
                        <v-btn class="mr-2" color="warning" small outlined @click="removeShopItem(shopping.selection, $index)">删除</v-btn>
                        <v-btn small color="primary" outlined>添加</v-btn>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </v-container>
            </v-expansion-panel>

            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>
                <div class="d-flex align-center justify-space-between">
                  <span>自费佣金收入</span>
                  <SelectShopping :selected="selectionShopping" @selection="handleChangeShopping" btn-text="添加自费"/>
                </div>
              </v-expansion-panel-header>
              <v-divider />
              <v-container class="pa-0">
                <template v-for="(shopping, index) in selecteShopping">
                  <v-container :key="shopping.id + 'b'" class="py-0">
                    <v-row style="background: #fafafa;" align="center">
                      <v-col cols="5" class="pl-6">{{shopping.name}}</v-col>
                      <v-col cols="7" class="d-flex align-center justify-end">
                        <span class="ml-6">币种：</span>
                        <div style="width: 150px;">
                          <v-select outlined hide-details dense :items="['人民币·CNY', '泰铢·THB']"></v-select>
                        </div>
                        <span class="ml-6">汇率：</span>
                        <div style="width: 80px;">
                          <v-text-field
                            hide-details
                            dense
                            outlined
                            single-line
                            >
                          </v-text-field>
                        </div>
                        <v-btn class="mx-6" small outlined @click="removeShopping(index)">删除</v-btn>
                        <v-btn small outlined>添加</v-btn>
                      </v-col>
                    </v-row>
                  </v-container>
                  <el-table
                    :key="shopping.id + 'a'"
                    :data="shopping.selection"
                    border>
                    <el-table-column
                      label="日期"
                      width="180">
                      <template slot-scope="{ row }">
                        <el-date-picker style="width: 158px" :clearable="false" v-model="row.date" value-format="yyyy-MM-dd"></el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="自费项目"
                      width="180">
                      <template slot="header">
                        <span class="mr-1">自费项目</span>
                        <small style="color: red">({{$t('other.required')}})</small>
                      </template>
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                          :rules="[rules.required]"
                          required
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="自费总额"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="自费人数"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="公司提成方式"
                      width="160">
                      <template slot-scope="{ row }">
                        <v-select
                          v-model="row.name"
                          :items="['按比例', '按数量', '固定金额']"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="公司提成"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        >
                          <div style="line-height: 24px;" slot="append">%</div>
                        </v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="公司收入"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="导游提成方式"
                      width="160">
                      <template slot-scope="{ row }">
                        <v-select
                          v-model="row.name"
                          :items="['按比例', '按数量', '固定金额']"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="导游提成"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        >
                          <div style="line-height: 24px;" slot="append">%</div>
                        </v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="导游预计佣金"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="领队提成方式"
                      width="160">
                      <template slot-scope="{ row }">
                        <v-select
                          v-model="row.name"
                          :items="['按比例', '按数量', '固定金额']"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="领队提成"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        >
                          <div style="line-height: 24px;" slot="append">%</div>
                        </v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="领队预计佣金"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="司机提成方式"
                      width="160">
                      <template slot-scope="{ row }">
                        <v-select
                          v-model="row.name"
                          :items="['按比例', '按数量', '固定金额']"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="司机提成"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        >
                          <div style="line-height: 24px;" slot="append">%</div>
                        </v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="司机预计返佣"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="二次返佣提成方式"
                      width="180">
                      <template slot-scope="{ row }">
                        <v-select
                          v-model="row.name"
                          :items="['按比例', '按数量', '固定金额']"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="二次提成"
                      width="100">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        >
                          <div style="line-height: 24px;" slot="append">%</div>
                        </v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="二次提成小计"
                      width="140">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="备注"
                      width="180">
                      <template slot-scope="{ row }">
                        <v-text-field
                          v-model="row.name"
                          outlined
                          single-line
                          hide-details
                          dense
                        ></v-text-field>
                      </template>
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      align="center"
                      width="140">
                      <template slot-scope="{ row, $index }">
                        <v-btn class="mr-2" color="warning" small outlined @click="removeShopItem(shopping.selection, $index)">删除</v-btn>
                        <v-btn small color="primary" outlined>添加</v-btn>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </v-container>
            </v-expansion-panel>

            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>
                <div class="d-flex align-center justify-space-between">
                  <span>其他收入</span>
                  <v-btn color="primary" rounded small>{{ $t('actions.add') }}</v-btn>
                </div>
              </v-expansion-panel-header>
              <v-divider />
              <v-container class="pa-0">
                <el-table
                  :data="tableData"
                  border>
                  <el-table-column
                    prop="date"
                    label="付款方"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="费用项目"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="币种"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="单价"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="数量"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="额外费用"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="额外费用说明"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="金额合计"
                    width="140">
                  </el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="备注"
                    min-width="140">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    prop="date"
                    label="审核"
                    width="140">
                    <template slot-scope="{ row }">
                      <v-switch class="mt-0" dense hide-details :input-value="row.status == 1" :label="row.status == 1 ? '已审核' : '未审核'" @change="setStatus(row)"></v-switch>
                    </template>
                  </el-table-column>
                </el-table>
              </v-container>
            </v-expansion-panel>

            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>
                <div class="d-flex align-center justify-space-between">
                  <span>公司收导游</span>
                  <v-btn color="primary" rounded small>{{ $t('actions.add') }}</v-btn>
                </div>
              </v-expansion-panel-header>
              <v-divider />
              <v-container class="pa-0">
                <el-table
                  :data="tableData"
                  border>
                  <el-table-column
                    label="导游"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="费用项目"
                    width="200">
                    <template slot="header">
                      <span class="mr-1">费用项目</span>
                      <small class="red--text">({{$t('other.required')}})</small>
                    </template>
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                        :rules="[rules.required]"
                        required
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="单价"
                    width="140">
                    <template slot="header">
                      <span class="mr-1">单价</span>
                      <small class="red--text">({{$t('other.required')}})</small>
                    </template>
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                        :rules="[rules.required]"
                        required
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="数量"
                    width="100">
                    <template slot="header">
                      <span class="mr-1">数量</span>
                      <small class="red--text">({{$t('other.required')}})</small>
                    </template>
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                        :rules="[rules.required]"
                        required
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="额外费用"
                    width="140">
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="额外费用说明"
                    width="180">
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="收款总额"
                    width="140">
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="备注"
                    min-width="140">
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    prop="date"
                    label="审核"
                    width="140">
                    <template slot-scope="{ row }">
                      <v-switch class="mt-0" dense hide-details :input-value="row.status == 1" :label="row.status == 1 ? '已审核' : '未审核'" @change="setStatus(row)"></v-switch>
                    </template>
                  </el-table-column>
                  <el-table-column
                      fixed="right"
                      :label="$t('other.action')"
                      width="80">
                      <template slot-scope="{ $index }">
                        <v-btn small color="warning" outlined @click="handleRmoveTourfee($index)">{{ $t('actions.delete') }}</v-btn>
                      </template>
                    </el-table-column>
                </el-table>
              </v-container>
            </v-expansion-panel>

            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>
                <div class="d-flex align-center justify-space-between">
                  <span>导游代收</span>
                  <v-btn color="primary" rounded small>{{ $t('actions.add') }}</v-btn>
                </div>
              </v-expansion-panel-header>
              <v-divider />
              <v-container class="pa-0">
                <el-table
                  :data="tableData"
                  border>
                  <el-table-column
                    label="导游"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="费用类型"
                    width="140">
                    <template slot="header">
                      <span class="mr-1">费用类型</span>
                      <small class="red--text">({{$t('other.required')}})</small>
                    </template>
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                        :rules="[rules.required]"
                        required
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="费用项目"
                    width="180">
                    <template slot="header">
                      <span class="mr-1">费用项目</span>
                      <small class="red--text">({{$t('other.required')}})</small>
                    </template>
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                        :rules="[rules.required]"
                        required
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="单价"
                    width="140">
                    <template slot="header">
                      <span class="mr-1">单价</span>
                      <small class="red--text">({{$t('other.required')}})</small>
                    </template>
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                        :rules="[rules.required]"
                        required
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="数量"
                    width="100">
                    <template slot="header">
                      <span class="mr-1">数量</span>
                      <small class="red--text">({{$t('other.required')}})</small>
                    </template>
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                        :rules="[rules.required]"
                        required
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="额外费用"
                    width="140">
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="额外费用说明"
                    width="180">
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="收款总额"
                    width="140">
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="备注"
                    min-width="140">
                    <template slot-scope="{ row }">
                      <v-text-field
                        v-model="row.name"
                        outlined
                        single-line
                        hide-details
                        dense
                      ></v-text-field>
                    </template>
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    prop="date"
                    label="审核"
                    width="140">
                    <template slot-scope="{ row }">
                      <v-switch class="mt-0" dense hide-details :input-value="row.status == 1" :label="row.status == 1 ? '已审核' : '未审核'" @change="setStatus(row)"></v-switch>
                    </template>
                  </el-table-column>
                  <el-table-column
                      fixed="right"
                      :label="$t('other.action')"
                      width="80">
                      <template slot-scope="{ $index }">
                        <v-btn small color="warning" outlined @click="handleRmoveTourfee($index)">{{ $t('actions.delete') }}</v-btn>
                      </template>
                    </el-table-column>
                </el-table>
              </v-container>
            </v-expansion-panel>

            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>
                <div class="d-flex align-center justify-space-between">
                  <span>收入合计</span>
                </div>
              </v-expansion-panel-header>
              <v-divider />
              <v-container class="pa-0">
                <el-table
                  :data="tableData"
                  border>
                  <el-table-column
                    prop="date"
                    label="币种"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="团费收入"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="购物佣金收入"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="自费佣金收入"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="其他收入"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="公司收导游"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="导游代收"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="合计金额"
                    min-width="180">
                  </el-table-column>
                </el-table>
              </v-container>
            </v-expansion-panel>
  
          </v-expansion-panels>
        </v-card-text>
      </v-card>
    </v-col>
    <v-col cols="2">
      <v-banner sticky single-line>
        <v-row class="py-2">
          <v-col cols="5"><v-btn style="width: 80px;" @click="handleSave" color="primary">保存</v-btn></v-col>
          <v-col cols="5"><v-btn style="width: 80px;" @click="$router.back()">返回</v-btn></v-col>
        </v-row>
        <v-stepper class="elevation-0" non-linear vertical>
          <v-stepper-step editable step="1">
            团费收入
          </v-stepper-step>
          <v-stepper-content step="1">
            <v-card color="lighten-1"></v-card>
          </v-stepper-content>
          <v-stepper-step editable step="2">
            购物佣金收入
          </v-stepper-step>
          <v-stepper-content step="2">
            <v-card color="lighten-1"></v-card>
          </v-stepper-content>
          <v-stepper-step editable step="3">
            自费佣金收入
          </v-stepper-step>
          <v-stepper-content step="3">
            <v-card color="lighten-1"></v-card>
          </v-stepper-content>
          <v-stepper-step editable step="4">
            其它收入
          </v-stepper-step>
          <v-stepper-content step="4">
            <v-card color="lighten-1"></v-card>
          </v-stepper-content>
          <v-stepper-step editable step="5">
            公司收导游
          </v-stepper-step>
          <v-stepper-content step="5">
            <v-card color="lighten-1"></v-card>
          </v-stepper-content>
          <v-stepper-step editable step="6">
            导游代收
          </v-stepper-step>
          <v-stepper-content step="6">
            <v-card color="lighten-1"></v-card>
          </v-stepper-content>
          <v-stepper-step editable step="7">
            合计
          </v-stepper-step>
        </v-stepper>
      </v-banner>
    </v-col>
  </v-row>
</template>

<script>
import SelectTourfee from '@/views/plan/components/select-tourfee'
import SelectShopping from '@/views/peers/components/select-shopping'
import * as incomeApi from '@/api/income'
export default {
  components: {
    SelectTourfee,
    SelectShopping
  },
  props: {
    value: [String, Object]
  },
  data() {
    return {
      cost: '',
      tableData: [],
      panel: [0, 1, 2, 3, 4, 5, 6],
      tourfeeData: [],
      selecteShopping: [],
      formData: {
        code_sign1: '',
        adult_num: '',
        bedkid_num: '',
        leader_num: '',
        order_date: '',
        company_id: undefined,
        code_a: '',
        company_name: '',
        operator_a: '',
        source: '',
        telphone: '',
        sgl: '',
        twn: '',
        trp: '',
        dbl: '',
        honeymood: '',
        tl: '',
        detail: {
          outlay: '',
          room_remark: '',
          car_remark: '',
          remark: '',
          checkout_remark: '',
          shoppingArr: [],
          self_costArr: []
        }
      },
      rules: {
        required: value => !!value || 'required',
      }
    }
  },
  computed: {
    childs() {
      let res = this.value?.childs || []
      let items = res.map(item => {
        return {
          ...item,
          tripname: item.company_name + ` · ${item.code}`
        }
      })
      this.setCost(items[0])
      return items
    },
    selecteTourfee: {
      get() {
        return this.tourfeeData
      }
    },
    selectionShopping: {
      get() {
        return this.selecteShopping.map(item => {
          return {
            id: item.id,
            name: item.name,
            selection: item.selection.map(val => {
              return {
                id: val.id,
                name: val.name,
                disabled: true
              }
            })
          }
        })
      }
    }
  },
  methods: {
    getPlanIncome(item) {
      if(item) {
        incomeApi.getPlanIncome({foundation_plan_id: item.id, page: 1, limit: 1000}).then(res => {
          this.setTourfee(res.data.data)
        })
      }
    },
    setCost(item) {
      this.cost = item
      this.getPlanIncome(item)
    },
    setTourfee(data = []) {
      this.tourfeeData = data
    },
    // 添加费用项目
    handleChangeTourfee(selection) {
      this.tourfeeData.push(...selection.map(item => {
        return {
          project_id: undefined,
          project_name: item.name,
          price: '',
          count: '',
          price_total: '',
          remark: ''
        }
      }))
    },

    // 添加购物
    handleChangeShopping(selection) {
      if(this.selecteShopping.length) {
        for(let i = 0; i < selection.length; i++) {
          let index = this.selecteShopping.findIndex(item => item.id === selection[i]['id'])
          if(index > -1) {
            this.selecteShopping[index].selection.push(...selection[i].selection)
          } else {
            this.selecteShopping.push({
              ...selection[i],
              selection: selection[i].selection.map(val => {
                return {
                  ...val,
                  date: '',
                }
              })
            })
          }
        }
      } else {
        this.selecteShopping.push(...selection.map(item => {
          return {
            ...item,
            selection: item.selection.map(val => {
              return {
                ...val,
                date: '',
              }
            })
          }
        }))
      }
    },

    // 删除费用项目
    handleRmoveTourfee(index) {
      this.tourfeeData.splice(index, 1)
    },

    // 计算合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 4 || index === 1 || index === 2) {
          sums[index] = '';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += ' 元';
        } else {
          sums[index] = '';
        }
      });

      return sums;
    },

    // 费用项目 计算总金额
    inputTourfeeItem(row) {
      row.price_total = (row.price || 0) * (row.count || 0)
    },

    // 删除购物店
    removeShopping(index) {
      this.selecteShopping.splice(index, 1)
    },

    // 删除购物商品
    removeShopItem(row, index) {
      row.splice(index, 1)
    },

    save() {
      if(this.$refs.tourFeeform.validate()) {
        let params = {
          foundation_plan_id: this.cost.id,
          plan_pid: this.cost.pid,
          son_obj_json: JSON.stringify(this.tourfeeData)
        }
        incomeApi.addPlanIncome(params).then(res => {
          console.log(res)
        })
      }
    },

    handleSave() {}
  }
}
</script>

<style>

</style>